<template>
  <!-- 当前所在页面的位置 -->
  <div class="component-container">
    <div class="bread-item">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <template v-for="(item,index) in currentPath">
          <!--<el-breadcrumb-item v-if="index == (currentPath.length-1)" :key="index">
	        			{{item.name}}
		            </el-breadcrumb-item>-->
          <el-breadcrumb-item :to="{ path: item.path}" :key="index">
            {{item.name}}
          </el-breadcrumb-item>
        </template>

      </el-breadcrumb>
    </div>

  </div>
</template>
<script>
export default {
  props: ['currentPath'],
  name: "breadcrumb",
  data () {
    return {}
  },
  methods: {
    goHome () {
      this.$router.push('/')
    }
  }
}
</script>
<style scoped lang="scss">
.component-container {
  padding-bottom: 20px;
  /*width: 1200px;*/
  margin: 0 auto;
  background: #fff;
  .bread-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    height: 44px;
    line-height: 44px;
    font-size: 16px;
    color: #333333;
  }
}

.current-site-title {
  margin: 0 5px 0 0;
  color: #888888;
}
.bread-img {
  margin-right: 10px;
}
// ::v-deep .el-breadcrumb__inner a:hover,
// ::v-deep .el-breadcrumb__inner.is-link:hover {
//   font-weight: 400;
//   color: #e22323 !important;
// }
::v-deep.el-breadcrumb__inner {
  font-weight: 400;
}
::v-deep .el-breadcrumb__inner a,
::v-deep .el-breadcrumb__inner a:hover,
::v-deep .el-breadcrumb__inner:hover {
  color: #e22323;
  cursor: pointer;
  font-weight: 400;
}
::v-deep .el-breadcrumb__item .el-breadcrumb__inner,
::v-deep .el-breadcrumb__item .el-breadcrumb__inner {
  font-weight: 400;
}

::v-deep .el-breadcrumb__item .el-breadcrumb__inner a,
::v-deep .el-breadcrumb__item .el-breadcrumb__inner a:hover,
::v-deep .el-breadcrumb__item .el-breadcrumb__inner:hover {
  color: #e22323;
  cursor: pointer;
  font-weight: 400;
}

::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
::v-deep .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
  font-weight: 400;
  cursor: pointer;
  color: #e22323;
}
</style>
<style>
.el-breadcrumb {
  font-size: 16px;
}
</style>